<template>
	<el-card class="layout-query">
		<el-form :inline="true">
			<el-form-item prop="postCode" label="关键词:">
				<el-input v-model="queryForm.keywords" placeholder="关键词" class="input-with-select">
					<template #prepend>
						<el-select v-model="queryForm.selected" placeholder="请选择" style="min-width: 100px !important" @change="handleSelectChange">
							<el-option v-for="item in selsectlist" :key="item" :label="item" :value="item"></el-option>
						</el-select>
					</template>
				</el-input>

				<!-- <div class="flex">
							<el-select v-model="queryParams.selected" placeholder="请选择"  style="min-width:0px!important">
								<el-option :label="item" :value="item" v-for="item in selsectlist" :key="item"></el-option>
							</el-select>
							
							<el-input v-model="queryParams.projectNumber" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected=='项目编号'" ></el-input>

							<el-input v-model="queryParams.responsibleOrgName" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected=='主管部门'"></el-input>
							<el-input v-model="queryParams.editorUnitName" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected=='主编单位'"></el-input>
							<el-input v-model="queryParams.contactName" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected=='项目负责人'"></el-input>
							<el-input v-model="queryParams.responsiblePerson" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected=='项目联系人'"></el-input>
							<el-input v-model="queryParams.standardProjectName" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected=='标准名称'"></el-input>
							<el-input v-model="queryParams.projectManagerA" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected=='项目管理员A'"></el-input>
							<el-input v-model="queryParams.projectManagerB" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected=='项目管理员B'"></el-input>
							<el-input v-model="queryParams.keywords" placeholder="关键词"  style="width: 200px" v-if="queryParams.selected==''"></el-input>
						</div> -->
			</el-form-item>

			<el-form-item label="编制进度:">
				<!-- <ma-dict-select
							v-model="queryParams.progressStage"
							dict-type="post_status"
							clearable
							placeholder="编制进度"
							ismultiple="true"
							:List="bianzhilist"
						></ma-dict-select> -->

				<el-select v-model="queryParams.progressStage" placeholder="请选择" multiple collapse-tags clearable>
					<el-option v-for="item in bianzhilist" :key="item.code" :label="item.name" :value="item.code"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="进度状态:">
				<el-select v-model="queryParams.progressState" placeholder="请选择" multiple collapse-tags clearable>
					<el-option v-for="item in jdstatuslist" :key="item.id" :label="item.name" :value="item.code"></el-option>
				</el-select>
				<!-- <ma-dict-select
							v-model="queryParams.progressState"
							dict-type="post_status"
							clearable
							ismultiple="true"
							placeholder="进度状态"
							:List="jdstatuslist"
						></ma-dict-select> -->
			</el-form-item>

			<el-form-item prop="job_status" label="立项时间:">
				<el-date-picker
					v-model="datatimelist"
					type="yearrange"
					range-separator="至"
					start-placeholder="开始日期"
					value-format="YYYY"
					end-placeholder="结束日期"
					@change="handleDateChange"
				/>
			</el-form-item>

			<el-form-item label="申请经费:">
				<el-input v-model="queryParams.minFund" placeholder="最小值" style="width: 100px"></el-input>
				<span style="margin-left: 20px; margin-right: 20px">-</span>
				<el-input v-model="queryParams.maxFund" placeholder="最大值" style="width: 100px"></el-input>
			</el-form-item>

			<el-form-item label="专业及重点领域分类:">
				<el-select v-model="queryParams.professionalKeyFields" placeholder="请选择" multiple collapse-tags clearable>
					<el-option v-for="item in zylist" :key="item.code" :label="item.name" :value="item.code"></el-option>
				</el-select>
				<!-- <ma-dict-select
							v-model="queryParams.professionalKeyFields"
							dict-type="post_status"
							clearable
							placeholder="专业及重点领域分类"
							:List="zylist"
						></ma-dict-select> -->
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-table
			v-loading="loading"
			:data="dataList"
			class="mt20"
			stripe
			border
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
			:row-class-name="tableRowClassName"
		>
			<el-table-column label="序号" align="center" type="index" width="60" fixed="left">
				<template #default="{ $index }">
					{{ (pageInfo.pageIndex - 1) * pageInfo.pageSize + $index + 1 }}
				</template>
			</el-table-column>
			<el-table-column label="项目编号" align="center" prop="projectNumber" width="120" fixed="left" resizable sortable />
			<el-table-column label="标准名称" align="center" prop="standardProjectName" width="300" resizable sortable />
			<!-- <el-table-column label="标准名称" align="center" prop="standardProjectName" width="200" fixed="left" resizable sortable> </el-table-column> -->
			<el-table-column label="主编单位" align="center" prop="editorUnitName" width="300" resizable sortable> </el-table-column>
			<el-table-column label="主管部门" align="center" prop="responsibleOrgName" width="230" resizable sortable> </el-table-column>
			<el-table-column label="立项时间" align="center" prop="initiationTime" width="120" resizable sortable> </el-table-column>
			<el-table-column label="实际拨付经费(万元)" align="center" prop="actualAllocationFunding" width="120" resizable sortable> </el-table-column>
			<el-table-column label="项目进度" align="center" prop="progressStageName" width="110" resizable sortable> </el-table-column>
			<el-table-column label="进度状态" align="center" prop="progressStatusName" width="110" resizable sortable> </el-table-column>

			<el-table-column label="大纲编制评审时间" align="center" prop="dgbzReviewTime" width="120" resizable sortable> </el-table-column>
			<el-table-column label="征求意见评审时间" align="center" prop="zqyjReviewTime" width="120" resizable sortable> </el-table-column>
			<el-table-column label="送审稿评审时间" align="center" prop="songsReviewTime" width="120" resizable sortable> </el-table-column>
			<el-table-column label="报批完成时间" align="center" prop="baopCompletionTime" width="120" resizable sortable> </el-table-column>
			<el-table-column label="发布时间" align="center" prop="releaseTime" width="150" resizable sortable> </el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="120">
				<template #default="{ row }">
					<el-icon
						v-if="row.progressStageName !== '发布实施'"
						v-auth="'M002_1_U'"
						:size="16"
						color="#1491FF"
						title="编辑"
						style="cursor: pointer; margin: 0 6px"
						@click="godetail(row, true, 1)"
					>
						<Edit />
					</el-icon>
					<el-icon :size="16" color="#1491FF" title="查看" style="cursor: pointer; margin: 0 6px" @click="godetail(row, false, 0)">
						<View />
					</el-icon>
					<!-- <el-icon :size="16" color="#1491FF" title="删除" style="cursor: pointer; margin: 0 6px" @click="deleitem($index)">
						<Delete />
					</el-icon> -->
					<el-icon
						v-auth="'M002_1_Process'"
						:size="16"
						color="#1491FF"
						title="进度"
						style="cursor: pointer; margin: 0 6px"
						@click="godetail(row, true, 2)"
					>
						<Clock />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="pageInfo.pageIndex"
			:page-size="pageInfo.pageSize"
			:total="pageInfo.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
		</el-pagination>
	</el-card>
</template>
<script setup lang="ts">
import { ueryProgressListApi } from '@/api/bianzhi/index'
import { router } from '@/router'
import { useDictionaryStore } from '@/store/modules/dictionary'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const dictionaryStore = useDictionaryStore()
const route = useRoute()
const pendingStatus = route.query.pendingStatus

const bianzhilist = dictionaryStore.getDictionaryByCode('T007')
const jdstatuslist = dictionaryStore.getDictionaryByCode('T014')
const zylist = dictionaryStore.getDictionaryByCode('T003')

const queryParams = ref({
	progressStage: [],
	startYear: '',
	endYear: '',
	minFund: '',
	maxFund: '',
	professionalKeyFields: [],
	projectNumber: '',
	responsibleOrgName: '',
	editorUnitName: '',
	contactName: '',
	responsiblePerson: '',
	standardProjectName: '',
	projectManagerA: '',
	projectManagerB: '',
	progressState: [],
	pendingStatus: pendingStatus || ''
})
const pageInfo = ref({ pageIndex: 1, pageSize: 10, total: 0 })
const defaultFilter = ref({
	progressStage: [],
	startYear: '',
	endYear: '',
	minFund: '',
	maxFund: '',
	professionalKeyFields: [],
	projectNumber: '',
	responsibleOrgName: '',
	editorUnitName: '',
	contactName: '',
	responsiblePerson: '',
	standardProjectName: '',
	projectManagerA: '',
	projectManagerB: '',
	progressState: [],
	pendingStatus: ''
})
const queryForm = ref({ keywords: '', selected: '' })
const datatimelist = ref([])
const loading = ref(false)
const dataList = ref([])
const selsectlist = ['项目编号', '主管部门', '主编单位', '项目负责人', '项目联系人', '标准名称', '项目管理员A', '项目管理员B']

// const jdstatuslist = [
// 	{ name: '正常', code: 1 },
// 	{ name: '滞销', code: 2 },
// 	{ name: '撤销', code: 3 },
// 	{ name: '归档', code: 4 }
// ]

const handleDateChange = val => {
	// 清空时，val 为 null，手动设置为空字符串

	datatimelist.value = val || [] // 清空时重置为空数组
	console.log('当前日期区间:', datatimelist.value)
}

const handleSearch = () => {
	if (queryForm.value.selected == '项目编号') {
		queryParams.value.projectNumber = queryForm.value.keywords
	} else if (queryForm.value.selected == '主管部门') {
		queryParams.value.responsibleOrgName = queryForm.value.keywords
	} else if (queryForm.value.selected == '主编单位') {
		queryParams.value.editorUnitName = queryForm.value.keywords
	} else if (queryForm.value.selected == '项目负责人') {
		queryParams.value.responsiblePerson = queryForm.value.keywords
	} else if (queryForm.value.selected == '项目联系人') {
		queryParams.value.contactName = queryForm.value.keywords
	} else if (queryForm.value.selected == '标准名称') {
		queryParams.value.standardProjectName = queryForm.value.keywords
	} else if (queryForm.value.selected == '项目管理员A') {
		queryParams.value.projectManagerA = queryForm.value.keywords
	} else if (queryForm.value.selected == '项目管理员B') {
		queryParams.value.projectManagerB = queryForm.value.keywords
	}

	queryParams.value.endYear = datatimelist.value[1] ? datatimelist.value[1] : ''
	queryParams.value.startYear = datatimelist.value[0] ? datatimelist.value[0] : ''

	getDataList()
	// const { dateRange, ...searchParams } = searchFormState.value
	// const [startTime, endTime] = Array.isArray(dateRange) ? dateRange : [null, null]

	// // 搜索参数赋值
	// Object.assign(searchState, { ...searchParams, startTime, endTime })
	// searchData()
}
const handleSelectChange = () => {
	queryForm.value.keywords = ''
	// queryForm.value.selected = ''
	queryParams.value.projectNumber = ''
	queryParams.value.responsibleOrgName = ''
	queryParams.value.editorUnitName = ''
	queryParams.value.responsiblePerson = ''
	queryParams.value.contactName = ''
	queryParams.value.standardProjectName = ''
	queryParams.value.projectManagerA = ''
	queryParams.value.projectManagerB = ''
}

const handleReset = () => {
	queryParams.value = { ...defaultFilter.value }
	queryForm.value.keywords = ''
	queryForm.value.selected = ''
	datatimelist.value = []
	getDataList()
}
onMounted(() => {
	getDataList()
})

const getDataList = () => {
	loading.value = true
	// delete queryParams.value.selected
	// delete queryParams.value.keywords
	const data = { ...queryParams.value, pageIndex: pageInfo.value.pageIndex, pageSize: pageInfo.value.pageSize }

	ueryProgressListApi(data).then(res => {
		loading.value = false
		dataList.value = res.data.list || []
		pageInfo.value.total = res.data.total || 0
	})
}

// const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
//   pageInfo.value.page = page;
//   pageInfo.value.limit = size;
//   list.value = [];
//   getuser_list();
// };
const handleSizeChange = (val: number) => {
	pageInfo.value.pageSize = val
	dataList.value = []
	getDataList()
}
const handleCurrentChange = (val: number) => {
	pageInfo.value.pageIndex = val
	dataList.value = []
	getDataList()
}

const godetail = (row, a, b) => {
	router.push({
		path: '/bzjddetail',
		query: {
			id: row.id,
			edit: a,
			progressStatus: row.progressStatus,
			active: b,
			progressStage: row.progressStage,
			progressColor: row.progressColor,
			name: row.standardProjectName,
			pid: row.projectInfoId
		}
	})
}

const tableRowClassName = ({ row }: { row: any }) => {
	if (row.progressColor) {
		return row.progressColor
	}
}
// const deleitem = (index) => {
// 	ElMessageBox.confirm('确定要删除吗？', '删除', {
// 		confirmButtonText: '确定',
// 		cancelButtonText: '取消',
// 		type: 'warning'
// 	}).then(() => {

// 		datalist.value.splice(index, 1)
// 	})
// }
</script>

<style lang="scss" scoped></style>
